<template>
  <a-spin :spinning="loading" class="w-full">
    <div class="ml-1 mt-2">
      <table v-if="props.isEdit">
        <tbody>
          <tr>
            <th rowspan="2" class="w-seven"></th>
            <th colspan="5" class="h-bgc h-text">右眼（OD）</th>
            <th colspan="5" class="h-bgc h-text">左眼（OS）</th>
            <th class="h-bgc"></th>
            <th class="h-bgc"></th>
          </tr>
          <tr>
            <td class="w-seven b-text-title">球镜（Sph）</td>
            <td class="w-seven b-text-title">柱镜（Cyl）</td>
            <td class="w-seven b-text-title">轴位（Axis）</td>
            <td class="w-seven b-text-title">视力（VA）</td>
            <td class="w-nine min-w-32 b-text-title">下加光（ADD）</td>
            <td class="w-seven b-text-title">球镜（Sph）</td>
            <td class="w-seven b-text-title">柱镜（Cyl）</td>
            <td class="w-seven b-text-title">轴位（Axis）</td>
            <td class="w-seven b-text-title">视力（VA）</td>
            <td class="w-nine min-w-32 b-text-title">下加光（ADD）</td>
            <td class="min-w-36 b-text-title">下加光（ADD）</td>
            <td class="w-seven b-text-info">
              <BaseInput v-model:value="tableData.globalAdd" :auto-focus="inputFocus === 11" placeholder="请输入" @press-enter="onPressEnter(12)" />
            </td>
          </tr>
          <tr>
            <td rowspan="2"><a-checkbox v-model:checked="tableData.isLong">远用</a-checkbox></td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.odLongSph"
                :auto-focus="inputFocus === 1"
                placeholder="请输入"
                @press-enter="onPressEnter(2)"
                @blur="onBlurFormatNum($event, 'odLongSph')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.odLongCyl"
                :auto-focus="inputFocus === 2"
                placeholder="请输入"
                @press-enter="onPressEnter(3)"
                @blur="onBlurFormatNum($event, 'odLongCyl')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.odLongAxis" :auto-focus="inputFocus === 3" placeholder="请输入" @press-enter="onPressEnter(4)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.odLongVa" :auto-focus="inputFocus === 4" placeholder="请输入" @press-enter="onPressEnter(5)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.odLongAdd" :auto-focus="inputFocus === 5" placeholder="请输入" @press-enter="onPressEnter(6)" />
            </td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.osLongSph"
                :auto-focus="inputFocus === 6"
                placeholder="请输入"
                @press-enter="onPressEnter(7)"
                @blur="onBlurFormatNum($event, 'osLongSph')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.osLongCyl"
                :auto-focus="inputFocus === 7"
                placeholder="请输入"
                @press-enter="onPressEnter(8)"
                @blur="onBlurFormatNum($event, 'osLongCyl')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.osLongAxis" :auto-focus="inputFocus === 8" placeholder="请输入" @press-enter="onPressEnter(9)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.osLongVa" :auto-focus="inputFocus === 9" placeholder="请输入" @press-enter="onPressEnter(10)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.osLongAdd" :auto-focus="inputFocus === 10" placeholder="请输入" @press-enter="onPressEnter(11)" />
            </td>
            <td class="b-text-title">瞳距（PD）</td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.longPd" :auto-focus="inputFocus === 12" placeholder="请输入" @press-enter="onPressEnter(13)" />
            </td>
          </tr>
          <tr>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳距（RPD）: </span
                  ><BaseInput
                    v-model:value="tableData.odLongRpd"
                    :auto-focus="inputFocus === 13"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(14)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">棱镜 : </span
                  ><BaseInput
                    v-model:value="tableData.odLongPd"
                    :auto-focus="inputFocus === 14"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(15)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳高（PH）: </span
                  ><BaseInput
                    v-model:value="tableData.odLongPh"
                    :auto-focus="inputFocus === 15"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(16)"
                  />
                </p>
              </div>
            </td>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳距（LPD）: </span
                  ><BaseInput
                    v-model:value="tableData.osLongRpd"
                    :auto-focus="inputFocus === 16"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(17)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">棱镜 : </span
                  ><BaseInput
                    v-model:value="tableData.osLongPd"
                    :auto-focus="inputFocus === 17"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(18)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳高（PH）: </span
                  ><BaseInput
                    v-model:value="tableData.osLongPh"
                    :auto-focus="inputFocus === 18"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(19)"
                  />
                </p>
              </div>
            </td>
            <td class="b-text-title">近距离检测（WD）</td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.longWd" :auto-focus="inputFocus === 19" placeholder="请输入" @press-enter="onPressEnter(20)" />
            </td>
          </tr>
          <tr>
            <td rowspan="2"><a-checkbox v-model:checked="tableData.isShort">近用</a-checkbox></td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.odShortSph"
                :auto-focus="inputFocus === 20"
                placeholder="请输入"
                @press-enter="onPressEnter(21)"
                @blur="onBlurFormatNum($event, 'odShortSph')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.odShortCyl"
                :auto-focus="inputFocus === 21"
                placeholder="请输入"
                @press-enter="onPressEnter(22)"
                @blur="onBlurFormatNum($event, 'odShortCyl')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.odShortAxis" :auto-focus="inputFocus === 22" placeholder="请输入" @press-enter="onPressEnter(23)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.odShortVa" :auto-focus="inputFocus === 23" placeholder="请输入" @press-enter="onPressEnter(24)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.odShortAdd" :auto-focus="inputFocus === 24" placeholder="请输入" @press-enter="onPressEnter(25)" />
            </td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.osShortSph"
                :auto-focus="inputFocus === 25"
                placeholder="请输入"
                @press-enter="onPressEnter(26)"
                @blur="onBlurFormatNum($event, 'osShortSph')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput
                v-model:value="tableData.osShortCyl"
                :auto-focus="inputFocus === 26"
                placeholder="请输入"
                @press-enter="onPressEnter(27)"
                @blur="onBlurFormatNum($event, 'osShortCyl')"
              />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.osShortAxis" :auto-focus="inputFocus === 27" placeholder="请输入" @press-enter="onPressEnter(28)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.osShortVa" :auto-focus="inputFocus === 28" placeholder="请输入" @press-enter="onPressEnter(29)" />
            </td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.osShortAdd" :auto-focus="inputFocus === 29" placeholder="请输入" @press-enter="onPressEnter(30)" />
            </td>
            <td class="b-text-title">瞳距（PD）</td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.shortPd" :auto-focus="inputFocus === 30" placeholder="请输入" @press-enter="onPressEnter(31)" />
            </td>
          </tr>
          <tr>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳距（RPD）: </span
                  ><BaseInput
                    v-model:value="tableData.odShortRpd"
                    :auto-focus="inputFocus === 31"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(32)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">棱镜 : </span
                  ><BaseInput
                    v-model:value="tableData.odShortPd"
                    :auto-focus="inputFocus === 32"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(33)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳高（PH）: </span
                  ><BaseInput
                    v-model:value="tableData.odShortPh"
                    :auto-focus="inputFocus === 33"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(34)"
                  />
                </p>
              </div>
            </td>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳距（LPD）: </span
                  ><BaseInput
                    v-model:value="tableData.osShortRpd"
                    :auto-focus="inputFocus === 34"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(35)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">棱镜 : </span
                  ><BaseInput
                    v-model:value="tableData.osShortPd"
                    :auto-focus="inputFocus === 35"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(36)"
                  />
                </p>
                <p class="mb-0 b-text-info flex">
                  <span class="b-text-title">瞳高（PH）: </span
                  ><BaseInput
                    v-model:value="tableData.osShortPh"
                    :auto-focus="inputFocus === 36"
                    class="!w-14 !h-6 ml-1"
                    placeholder="请输入"
                    @press-enter="onPressEnter(37)"
                  />
                </p>
              </div>
            </td>
            <td class="b-text-title">近距离检测（WD）</td>
            <td class="b-text-info">
              <BaseInput v-model:value="tableData.shortWd" :auto-focus="inputFocus === 37" placeholder="请输入" @press-enter="onPressEnter(38)" />
            </td>
          </tr>
        </tbody>
      </table>
      <table v-else>
        <tbody>
          <tr>
            <th rowspan="2" class="w-seven"></th>
            <th colspan="5" class="h-bgc h-text">右眼（OD）</th>
            <th colspan="5" class="h-bgc h-text">左眼（OS）</th>
            <th class="h-bgc"></th>
            <th class="h-bgc"></th>
          </tr>
          <tr>
            <td class="w-seven b-text-title">球镜（Sph）</td>
            <td class="w-seven b-text-title">柱镜（Cyl）</td>
            <td class="w-seven b-text-title">轴位（Axis）</td>
            <td class="w-seven b-text-title">视力（VA）</td>
            <td class="w-nine min-w-32 b-text-title">下加光（ADD）</td>
            <td class="w-seven b-text-title">球镜（Sph）</td>
            <td class="w-seven b-text-title">柱镜（Cyl）</td>
            <td class="w-seven b-text-title">轴位（Axis）</td>
            <td class="w-seven b-text-title">视力（VA）</td>
            <td class="w-nine min-w-32 b-text-title">下加光（ADD）</td>
            <td class="min-w-36 b-text-title">下加光（ADD）</td>
            <td class="w-seven b-text-info">{{ tableData.globalAdd }}</td>
          </tr>
          <tr>
            <td rowspan="2"><a-checkbox disabled :checked="tableData.isLong">远用</a-checkbox></td>
            <td class="b-text-info">{{ tableData.odLongSph }}</td>
            <td class="b-text-info">{{ tableData.odLongCyl }}</td>
            <td class="b-text-info">{{ tableData.odLongAxis }}</td>
            <td class="b-text-info">{{ tableData.odLongVa }}</td>
            <td class="b-text-info">{{ tableData.odLongAdd }}</td>
            <td class="b-text-info">{{ tableData.osLongSph }}</td>
            <td class="b-text-info">{{ tableData.osLongCyl }}</td>
            <td class="b-text-info">{{ tableData.osLongAxis }}</td>
            <td class="b-text-info">{{ tableData.osLongVa }}</td>
            <td class="b-text-info">{{ tableData.osLongAdd }}</td>
            <td class="b-text-title">瞳距（PD）</td>
            <td class="b-text-info">{{ tableData.longPd }}</td>
          </tr>
          <tr>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳距（RPD）: </span>{{ tableData.odLongRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜 : </span>{{ tableData.odLongPd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳高（PH）: </span>{{ tableData.odLongPh }}</p>
              </div>
            </td>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳距（LPD）: </span>{{ tableData.osLongRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜 : </span>{{ tableData.osLongPd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳高（PH）: </span>{{ tableData.osLongPh }}</p>
              </div>
            </td>
            <td class="b-text-title">近距离检测（WD）</td>
            <td class="b-text-info">{{ tableData.longWd }}</td>
          </tr>
          <tr>
            <td rowspan="2">
              <a-checkbox disabled :checked="tableData.isShort">近用</a-checkbox>
            </td>
            <td class="b-text-info">{{ tableData.odShortSph }}</td>
            <td class="b-text-info">{{ tableData.odShortCyl }}</td>
            <td class="b-text-info">{{ tableData.odShortAxis }}</td>
            <td class="b-text-info">{{ tableData.odShortVa }}</td>
            <td class="b-text-info">{{ tableData.odShortAdd }}</td>
            <td class="b-text-info">{{ tableData.osShortSph }}</td>
            <td class="b-text-info">{{ tableData.osShortCyl }}</td>
            <td class="b-text-info">{{ tableData.osShortAxis }}</td>
            <td class="b-text-info">{{ tableData.osShortVa }}</td>
            <td class="b-text-info">{{ tableData.osShortAdd }}</td>
            <td class="b-text-title">瞳距（PD）</td>
            <td class="b-text-info">{{ tableData.shortPd }}</td>
          </tr>
          <tr>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳距（RPD）: </span>{{ tableData.odShortRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜 : </span>{{ tableData.odShortPd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳高（PH）: </span>{{ tableData.odShortPh }}</p>
              </div>
            </td>
            <td colspan="5">
              <div class="flex justify-evenly">
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳距（LPD）: </span>{{ tableData.osShortRpd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">棱镜 : </span>{{ tableData.osShortPd }}</p>
                <p class="mb-0 b-text-info"><span class="b-text-title">瞳高（PH）: </span>{{ tableData.osShortPh }}</p>
              </div>
            </td>
            <td class="b-text-title">近距离检测（WD）</td>
            <td class="b-text-info">{{ tableData.shortWd }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </a-spin>
</template>
<script setup>
import { message } from 'ant-design-vue'
import { formatAmount } from '@/utils/format.js'

const emit = defineEmits(['success'])
const props = defineProps({
  resourceData: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  },
  isEdit: {
    type: Boolean,
    default: true
  }
})

const tableData = ref({})
const inputFocus = ref(1)

const sendData = () => {
  if (!tableData.value.isLong && !tableData.value.isShort) return message.warning('请选择远用近用')
  for (const key in tableData.value) {
    if (key !== 'status' && key !== 'chkEmpId' && key !== 'chkEmpName' && key !== 'id' && key !== 'updateTime' && key !== 'isLong' && key !== 'isShort') {
      tableData.value[key] = tableData.value[key]?.replace('+', '')
      // tableData.value[key] = tableData.value[key]?.replace('-', '')
    }
  }
  // editFlag  true 修改处方  undefined  修改验光师
  emit('success', {
    ...tableData.value,
    isLong: tableData.value.isLong ? '1' : '0',
    isShort: tableData.value.isShort ? '1' : '0'
  })
}

const onPressEnter = (num) => {
  if (num === 38) {
    inputFocus.value = 1
  } else {
    inputFocus.value = num
  }
}

const onBlurFormatNum = (e, val) => {
  if (e.target.value.includes('+')) {
    tableData.value[val] = '+' + formatAmount(e.target.value, 2, false)
  } else {
    tableData.value[val] = formatAmount(e.target.value, 2, false)
  }
}

watch(
  () => props.resourceData,
  (val) => {
    if (val) {
      tableData.value = {
        ...val,
        isLong: val.isLong === '1' ? true : false,
        isShort: val.isShort === '1' ? true : false
      }
    } else {
      tableData.value = {}
    }
  },
  {
    immediate: true
  }
)
defineExpose({
  sendData
})
</script>
<style lang="less" scoped>
table,
th,
td {
  border: 1px solid #d7d7d7;
  border-collapse: collapse;
}
table {
  width: 100%;
}
tr {
  width: 100%;
}
th {
  font-weight: normal;
}
th,
td {
  height: 48px;
  // padding: 8px;
  // padding: 8px 6px;
  text-align: center;
}
.h-bgc {
  background-color: #f2f2f2;
}
.h-text {
  color: #000;
  font-weight: 500;
  font-size: 18px;
}
.b-text-title {
  color: #000;
  font-size: 14px;
}
.b-text-info {
  color: #000;
}
.w-seven {
  width: 7% !important;
}
.w-eight {
  width: 8% !important;
}
.w-nine {
  width: 9%;
}
.ant-input {
  width: 100%;
  height: 100%;
  text-align: center;
  border: none;
}
</style>
